<template>
  <div>
    <el-empty v-show="!tableData.length" description="暂无数据"></el-empty>
    <div class="course-item" v-for="v in tableData" :key="v.id">
      <el-card class="box-card">
        <div class="course-top">
          <el-row :gutter="20">
            <el-col :span="6">
              <p>{{ v.createTime }}</p>
            </el-col>
            <el-col :span="6">
              <p v-if="v.isDel"
                ><i>课程状态：</i><span class="color-danger">资源已删除</span>
              </p>
              <p v-if="!v.isDel">
                <span
                  v-show="
                    v.sysCourseInfo.status == 0 &&
                    v.sysCourseInfo.auditStatus == 1
                  "
                >
                  <i>课程状态：</i>暂存</span
                >
                <span v-show="v.sysCourseInfo.status == 1"
                  ><i>课程状态：</i>已上线</span
                >
                <span v-show="v.sysCourseInfo.status == 2"
                  ><i>课程状态：</i>待发布</span
                >
              </p>
              <p
                v-if="!v.isDel"
                v-show="
                  v.sysCourseInfo.status == 0 &&
                  v.sysCourseInfo.auditStatus != 1
                "
              >
                <i>审核状态：</i>
                <span v-show="v.sysCourseInfo.auditStatus == 4">待审核</span>
                <span
                  class="color-success"
                  v-show="v.sysCourseInfo.auditStatus == 2"
                >
                  审核通过，待发布
                </span>
                <span
                  class="color-danger"
                  v-show="v.sysCourseInfo.auditStatus == 3"
                >
                  审核未通过
                </span>
              </p>
            </el-col>
            <el-col :span="12">
              <p class="sheng" :title="v.sysCourseInfo.team">
                {{ v.sysCourseInfo.team }}
              </p>
            </el-col>
          </el-row>
        </div>
        <div class="course-info">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="course-title-wrap">
                <img
                  :src="coverImg(v.sysCourseInfo)"
                  class="cover-img"
                  @click="handlePreview(v.sysCourseInfo)"
                />
                <p
                  class="four-ellipsis"
                  :title="v.sysCourseInfo.title"
                  @click="handlePreview(v.sysCourseInfo)"
                  >{{ v.sysCourseInfo.title }}</p
                >
              </div>
            </el-col>
            <el-col :span="6">
              <div class="course-info-wrap">
                <p>建设单位：{{ deptNames(v.sysCourseInfo) }}</p>
                <p>板块类别：{{ v.sysCourseInfo.courseType | auditType }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="course-btn-wrap">
                <el-button
                  type="success"
                  plain
                  size="mini"
                  :disabled="v.isDel"
                  @click="handlePreview(v.sysCourseInfo)"
                  >预览</el-button
                >
                <el-popconfirm title="确定移除吗？" @confirm="handleDelete(v)">
                  <el-button slot="reference" size="mini" type="danger"
                    >移除</el-button
                  >
                </el-popconfirm>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>
<script>
import {
  expertsReviewResourceQuery,
  expertsReviewResourceDelete,
} from '@/api/admin/audit/expertsReviewResource.js'
import webinfo from '@/mixins/webinfo.js'
import setInfo from '@/mixins/setInfo.js'
import coursePreview from '@/mixins/coursePreview'
export default {
  mixins: [webinfo, setInfo, coursePreview],
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        reviewId: '',
      },
      tableData: [],
      pageObj: {},
    }
  },
  props: ['reviewData'],
  computed: {
    deptNames() {
      return (v) => {
        if (v.sourceType == 2 && v.extFiled2) {
          //校外资源前端显示资源建设单位
          return v.extFiled2
        } else if (v.tbSysDept) {
          let dep = v.tbSysDept.deptFullnamepath.split('/')
          if (dep.length >= 3) {
            return dep[2]
          } else {
            return '陆军工程大学'
          }
        } else {
          return '陆军工程大学'
        }
      }
    },
  },
  watch: {
    reviewData: {
      immediate: true,
      handler() {
        this.listQuery.reviewId = this.reviewData.id
      },
    },
  },
  mounted() {
    this.getList()
    this.$bus.$on('refreshReviewResource', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
    })
    this.$bus.$on('deleteAllReviewResource', () => {
      this.handleDeleteAll()
    })
  },
  beforeDestroy() {
    this.$bus.$off('refreshReviewResource')
    this.$bus.$off('deleteAllReviewResource')
  },
  methods: {
    async getList() {
      let res = await expertsReviewResourceQuery(this.listQuery)
      this.tableData = res.data.data
      this.tableData.forEach((v) => {
        this.$set(v, 'isDel', false)
        if (!v.sysCourseInfo.id) {
          v.sysCourseInfo = JSON.parse(v.extFiled)
          v.isDel = true
        }
      })
      this.pageObj = res.data
    },
    async handleDelete(v) {
      await expertsReviewResourceDelete(v.id)
      this.getList()
      this.$message({
        message: '操作成功',
        type: 'success',
      })
    },
    //全部移除
    handleDeleteAll() {
      let arr = []
      this.tableData.forEach(async (item) => {
        let res = await expertsReviewResourceDelete(item.id)
        arr.push(res)
        if (arr.length == this.tableData.length) {
          this.getList()
        }
      })
    },
    toCourseDetail(row) {
      let type = row.courseType
      let name = 'course-detail'
      if (type == 1) {
        name = 'course-detail'
      }
      if (type == 2) {
        name = 'specialty-detail'
      }
      if (type == 3) {
        name = 'arms-librarys'
      }
      if (type == 4) {
        name = 'topic-detail'
      }
      if (type == 5) {
        name = 'micro-detail'
      }
      if (type == 6) {
        name = 'training-detail'
      }
      this.$store.commit('SETCURCOURSE', row)
      if (type == 3) {
        this.$router.push({
          name: name,
          query: { id: row.id, type: 3 },
        })
      } else {
        this.$router.push({
          name: name,
          query: { courseId: row.id },
        })
      }
    },
  },
}
</script>
<style scoped lang="scss">
.course-item {
  margin-top: 20px;
  .course-top {
    height: 48px;
    line-height: 48px;
    background: #f8f8f8;
    padding: 0 20px;
    border-bottom: 2px solid #eee;
  }
  .course-info {
    border-bottom: 1px solid #eee;
    .course-title-wrap {
      padding: 20px;
      min-height: 80px;
      position: relative;
      .cover-img {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 120px;
        height: 80px;
        display: block;
        margin-right: 20px;
        cursor: pointer;
        border: 1px solid #eee;
      }
      p {
        color: #333;
        font-size: 14px;
        line-height: 20px;
        word-break: break-all;
        padding-left: 140px;
        box-sizing: border-box;
        font-weight: bold;
        cursor: pointer;
        &:hover {
          color: var(--colorH1);
        }
      }
    }
    .course-info-wrap {
      padding: 20px;
      min-height: 80px;
      line-height: 32px;
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
    }
    .course-btn-wrap {
      padding: 20px 0;
      min-height: 80px;
      button {
        margin-right: 10px;
      }
    }
  }
}
</style>